<template>
  <div class="content">
    <div class="content-left">基本信息</div>
    <div class="content-right">
      <el-form
        ref="ruleFormRef"
        :model="submitForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        size="default"
        status-icon
        require-asterisk-position="right"
      >
        <el-form-item label="线下店铺牌匾名" prop="name">
          <el-input
            v-model="submitForm.name"
            placeholder="请与门店照上的名称保持一致"
            clearable
            style="width: 500px"
          />
        </el-form-item>
        <el-form-item label="所在城市" prop="city" class="public">
          <el-cascader
            ref="cityValue"
            v-model="submitForm.areaCodes"
            placeholder="请选择所在城市"
            :options="(cityList as any)"
            :props="cityProps"
            @change="changeCityValue"
          />
        </el-form-item>
        <el-form-item label="门店地址" prop="address" class="public">
          <div>
            <div class="right-hint">
              文本地址需与许可证上经营的场所保持一致，否则审核不通过
            </div>
            <el-input
              v-model="submitForm.address"
              placeholder="文本地址需与许可证上经营的场所保持一致，否则审核不通过"
              clearable
              style="width: 500px"
            />
          </div>
        </el-form-item>
        <!-- 地图 -->
        <div class="map" style="margin-top: 10px; margin-left: 120px">
          <my-map @address-total="addressTotal"></my-map>
        </div>
        <el-form-item label="菜单列表" prop="categoryIds" class="public">
          <el-cascader
            v-model="submitForm.categoryIds"
            placeholder="请选择菜单"
            :options="(menuList as any)"
            :props="menuProps"
            @change="changeMainCategory"
          />
        </el-form-item>
        <el-form-item label="门店logo" prop="logo" class="public">
          <my-photo
            :imgurl="
              submitForm.logo
                ? 'http://zxc.ruanjian211.top/' + submitForm.logo
                : ''
            "
            @photo-path="logoPhoto"
          ></my-photo>
        </el-form-item>
        <el-form-item
          label="店铺门面照"
          prop="storeOuterPicture"
          class="public"
        >
          <my-photo
            :imgurl="
              submitForm.storeOuterPicture
                ? 'http://zxc.ruanjian211.top/' + submitForm.storeOuterPicture
                : ''
            "
            @photo-path="storeOuterPicturePhoto"
          ></my-photo>
        </el-form-item>

        <el-form-item
          label="店铺内部照"
          prop="storeInsidePicture"
          class="public"
        >
          <my-photo
            :imgurl="
              submitForm.storeInsidePicture
                ? 'http://zxc.ruanjian211.top/' + submitForm.storeInsidePicture
                : ''
            "
            @photo-path="storeInsidePicturePhoto"
          ></my-photo>
        </el-form-item>
        <el-form-item label="外卖电话" prop="takeawayPhone" class="public">
          <el-input
            v-model="submitForm.takeawayPhone"
            placeholder="请输入外卖电话"
            clearable
            style="width: 500px"
          />
        </el-form-item>
        <el-form-item label="联系人" prop="linkName" class="public">
          <el-input
            v-model="submitForm.linkName"
            placeholder="请输入联系人"
            clearable
            style="width: 500px"
          />
        </el-form-item>

        <el-form-item label="联系电话" prop="linkPhone" class="public">
          <el-input
            v-model="submitForm.linkPhone"
            placeholder="请输入联系电话"
            clearable
            style="width: 500px"
          />
        </el-form-item>
        <div
          style="
            width: 500px;
            height: 70px;
            margin-left: 120px;
            color: #909399;
            margin-bottom: 50px;
          "
        >
          建议填写门店经营者/店长手机号。若该手机号尚未注册饿了么，则会注册为该门店账号；若该手机号已注册饿了么，则用于接收该门店账号和密码
        </div>
      </el-form>
    </div>
  </div>
  <div class="bottom">
    <div class="next" @click="gonext">
      <span>下一步</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {
  GetCityDetail,
  GetMenuDetail,
  submitBaseInfo,
  getBaseInfo,
} from '@/api/register/register'

import myMap from '@/views/register/components/public/mymap.vue'
import { queryReq } from '@/utils/http/code'
import {
  CityListType,
  MenuListType,
  ShopInfoType,
} from '@/api/register/types/register'
import myPhoto from '@/views/register/components/public/myphoto.vue'
import useSellerRegisterStore from '@/store/modules/register'

const router = useRouter()

/**
 * 初始化城市列表
 */
const initCityList = async () => {
  const res = await GetCityDetail()
  const res1 = await GetMenuDetail()
  queryReq(res, (data) => {
    cityList.value = data
  })
  queryReq(res1, (data) => {
    menuList.value = data
  })
}
const initBaseInfo = async () => {
  const res = await getBaseInfo(useSellerRegisterStore().storeId)
  queryReq(res, (data: ShopInfoType) => {
    submitForm.value = data
  })
}
// const computedImg = (img: string) => {
//   submitForm.value.logo = 'http://zxc.ruanjian211.top/' + img
// }
onMounted(() => {
  initCityList()
  initBaseInfo()
})

const gonext = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      submit(submitForm.value)
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 提交表单函数
const submit = async (item: ShopInfoType) => {
  const res = await submitBaseInfo(item)
  queryReq(res, (data: any) => {
    const { registerQualification } = useSellerRegisterStore()
    useSellerRegisterStore().setStoreId(data.storeId)
    useSellerRegisterStore().nextPage(registerQualification, true)
    router.push(registerQualification)
  })
}

const changeMainCategory = () => {
  const idLength = submitForm.value.categoryIds.length
  submitForm.value.mainCategory = submitForm.value.categoryIds[idLength - 1]
}
const cityValue = ref()
const changeCityValue = () => {
  const cityList = cityValue.value.getCheckedNodes()[0].pathLabels
  submitForm.value.province = cityList[0]
  submitForm.value.city = cityList[1]
  if (cityList[2]) {
    submitForm.value.district = cityList[2]
  } else {
    submitForm.value.district = null as any
  }
  console.log(submitForm, 123123)
}

const menuProps = {
  label: 'categoryName',
  value: 'id',
}
/**
 * 初始化联级选择器的绑定值
 */
const cityProps = {
  label: 'name',
  value: 'id',
}
/**
 * 菜单列表
 */
const menuList = ref<MenuListType[]>([])

/**
 * 城市列表
 */
const cityList = ref<CityListType[]>([])

/**
 * 提交的表单
 */
const submitForm = ref<ShopInfoType>({
  applyId: useSellerRegisterStore().storeId,
  name: '',
  categoryIds: [],
  mainCategory: 0,
  province: '',
  city: '',
  district: '',
  areaCodes: [],
  address: '',
  logo: '',
  storeOuterPicture: '',
  storeInsidePicture: '',
  takeawayPhone: '',
  linkName: '',
  linkPhone: '',
})

//商家logo地址
const logoPhoto = (item: string) => {
  submitForm.value.logo = item
}
// 店铺内部照
const storeInsidePicturePhoto = (item: string) => {
  submitForm.value.storeInsidePicture = item
}
// 店铺门面照
const storeOuterPicturePhoto = (item: string) => {
  submitForm.value.storeOuterPicture = item
}
const ruleFormRef = ref<FormInstance>()

/**
 * 验证规则
 */
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
  city: [
    {
      required: true,
      message: '请选择城市',
      trigger: 'blur',
    },
  ],
  address: [
    {
      required: true,
      message: '请填写门店地址',
      trigger: 'blur',
    },
  ],
  categoryIds: [
    {
      required: true,
      message: '请选择商品类型',
      trigger: 'blur',
    },
  ],
  logo: [
    {
      required: true,
      message: '请上传门店logo',
      trigger: 'blur',
    },
  ],
  storeOuterPicture: [
    {
      required: true,
      message: '请上传门面照',
      trigger: 'blur',
    },
  ],
  storeInsidePicture: [
    {
      required: true,
      message: '请上传店内照',
      trigger: 'blur',
    },
  ],
  takeawayPhone: [
    {
      required: true,
      message: '请填写外卖电话',
      trigger: 'change',
    },
    {
      message: '请填写正确的联系电话',
      pattern: /^1[3-9][0-9]{9}$/,
    },
  ],
  linkName: [
    {
      required: true,
      message: '请填写联系人',
      trigger: 'change',
    },
    {
      max: 11,
      message: '用户名长度最多11位',
    },
  ],
  linkPhone: [
    {
      required: true,
      message: '请填写联系电话',
      trigger: 'change',
    },
    {
      message: '请填写正确的联系电话',
      pattern: /^1[3-9][0-9]{9}$/,
    },
  ],
})
/**
 *给文本框添加地址
 * @param item
 */
const addressTotal = (item: any) => {
  submitForm.value.address = item
}
</script>
<style lang="scss" scoped>
.content {
  margin-top: 30px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  .content-left {
    width: 150px;
    font-size: 16px;
  }
  .content-right {
    .right-hint {
      padding: 2px 5px;
      background-color: #fdf6ea;
      font-size: 12px;
      color: #e6a23c;
      margin-bottom: 4px;
    }
    .map {
      .confirm {
        width: 50px;
        height: 20px;
        padding: 2px 0;
        background-color: #f56c6c;
        text-align: center;
        border-radius: 6px;
        line-height: 20px;
        cursor: pointer;
      }
    }
    .public {
      margin-top: 40px;
    }
  }
}
:deep(.anchorBL) {
  display: none !important;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 44px;
  background: #fff;
  box-shadow: 0 -2px 15px 0 rgba(0, 0, 0, 0.05);
  .next {
    width: 76px;
    height: 34px;
    background-color: #1989fa;
    border-radius: 6px;
    text-align: center;
    line-height: 34px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
  }
}
</style>
